<template>
  <view class="j_page">
    <view class="j_page_navbar" v-if="navbar">
      <j-navbar :back-text="backText"
                :title-color="titleColor"
                :border-bottom="borderBottom"
                :back-icon-color="backIconColor"
                :is-back="getIsBack"
                :title="title"
                :background="navbarBg"
                :back-text-style="backTextStyle">
        <template slot="right">

        </template>
      </j-navbar>
    </view>
    <view class="j_page_body" :style="{backgroundColor}">
      <scroll-view
          class="j_page_body_scroll"
          :class="{'content_tabbar':tabbar,'content_width':type==='content',hideScroll}"
          :scroll-y="scrollY"
          :refresher-enabled="refresherEnabled"
          :refresher-triggered="isRefresh"
          :refresher-background="backgroundColor"
          @refresherrefresh="refresherrefresh"
          @scrolltoupper="scrolltoupper"
          @scrolltolower="scrolltolower">
        <slot>

        </slot>
      </scroll-view>
    </view>
    <view class="j_page_tabbar" v-if="tabbar">
      <j-tabbar></j-tabbar>
    </view>
  </view>
</template>

<script>
export default {
  name: "j-page",
  props: {
    refresherTriggered: {
      type: Boolean,
      default: false
    },
    scrollY: {
      type: Boolean,
      default: true
    },
    upperThreshold: {
      type: Number,
      default: 50
    },
    lowerThreshold: {
      type: Number,
      default: 50
    },
    refresherEnabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default:""
    },
    tabbar: {
      type: Boolean,
      default: false
    },
    navbar: {
      type: Boolean,
      default: true
    },
    borderBottom: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "full"
    },
    backgroundColor: {
      type: String,
      default: "#f3f4f6"
    },
    hideScroll:{
      type: Boolean,
      default: true
    },
    navbarBg:{
      type: Object,
      default:()=>({ background: "#f3f4f6" })
    },
    backText:{
      type: String,
      default:"$"
    },
    titleColor:{
      type: String,
      default:"#606266"
    },
    backIconColor:{
      type: String,
      default:"#606266"
    },
    backTextStyle:{
      type: Object,
      default:()=>({ color: "#606266" })
    },
    isBack:{//是否显示返回标准
      type:Boolean,
      default: true
    }
  },
  data() {
    return {
      isRefresh:false
    }
  },
  computed:{
    getIsBack(){
      return getCurrentPages().length>1 && this.isBack;
    }
  },
  methods: {
    refresherrefresh(e){
      console.log(this.isRefresh);
      //this.$emit('refresherrefresh',e)
      setTimeout(()=> {
        console.log(this.isRefresh);
        this.isRefresh=false
      }, 1000)

    },
    scrolltoupper(e){this.$emit('scrolltoupper',e)},
    scrolltolower(e){this.$emit('scrolltolower',e)},
  },created(){
    uni.hideTabBar()
  }
}
</script>

<style lang="scss" scoped>
.j_page{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  &_navbar{
    width: 100%;
  }

  &_body{
    flex:1;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    background-clip: border-box;

    &_scroll{
      width: 100%;
      height: 100%;
    }
  }

  &_tabbar{
    width: 100%;
  }
}
/*.content {

  flex: auto;
}

.content_tabbar {
  // #ifdef H5
  height: calc(100% - 44px - 50px);
  // #endif

  // #ifndef H5
  height: calc(100% - 66px - 50px);
  // #endif

}

//两边留出距离来
.content_width{
  padding: 15px;
}

.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.hideScroll ::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}*/
</style>
